<template>
  <div class="edit_dialog">
    <div class="edit_list">
      <el-form
        ref="form"
        class="item_box"
        :rules="rules"
        :model="currEdit"
        label-position="right"
        label-width="130px"
      >
        <el-row style="width: 100%">
          <el-col :span="12">
            <el-form-item label="属性：" prop="fieldAttribute">
              <el-input
                class="bin_input"
                maxlength="20"
                v-model="currEdit.fieldAttribute"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段标识：" prop="fieldName">
              <el-tooltip content="字段标识是程序中使用" placement="top-start">
                <el-input
                  class="bin_input"
                  maxlength="20"
                  v-model="currEdit.fieldName"
                  placeholder="请输入"
                ></el-input>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段名称：" prop="fieldDescription">
              <el-input
                class="bin_input"
                maxlength="20"
                v-model="currEdit.fieldDescription"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据类型：" prop="fieldType">
              <el-select
                filterable
                class="bin_select"
                v-model="currEdit.fieldType"
                placeholder="请选择数据类型"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="长度：" prop="fieldLength">
              <el-input
                class="bin_input"
                maxlength="50"
                v-model="currEdit.fieldLength"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="域值：" prop="fieldRange">
              <el-row style="display: flex; align-items: center">
                <el-col :span="10">
                  <el-form-item prop="fieldRangeMin">
                    <el-input
                      class="bin_input"
                      maxlength="10"
                      v-model="currEdit.fieldRangeMin"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="4" style="text-align: center"
                  >一</el-col
                >
                <el-col :span="10">
                  <el-form-item prop="fieldRangeMax">
                    <el-input
                      class="bin_input"
                      maxlength="10"
                      v-model="currEdit.fieldRangeMax"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否允许为空：" prop="isNull">
              <el-select
                class="bin_input"
                v-model="currEdit.isNull"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in optionsnull"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="是否唯一：" prop="isOnly">
              <el-select
                class="bin_input"
                v-model="currEdit.isOnly"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in optionsonly"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="要素说明：" prop="elementDefinition">
              <el-input
                class="bin_input"
                maxlength="10"
                v-model="currEdit.elementDefinition"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签：" prop="target">
              <el-input
                class="bin_input"
                maxlength="10"
                v-model="currEdit.target"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="量纲：" prop="unit">
              <el-input
                class="bin_input"
                maxlength="10"
                v-model="currEdit.unit"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务操作类型：" prop="businessOperationType">
              <el-input
                class="bin_input"
                maxlength="10"
                v-model="currEdit.businessOperationType"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属类别：" prop="fieldCategory">
              <el-input
                class="bin_input"
                maxlength="10"
                v-model="currEdit.fieldCategory"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联字典：" prop="associationDict">
              <el-input
                class="bin_input"
                maxlength="10"
                v-model="currEdit.associationDict"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理单位：" prop="managementUnit">
              <el-input
                class="bin_input"
                maxlength="10"
                v-model="currEdit.managementUnit"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="格式说明：" prop="historicalExplanation">
              <el-input
                class="bin_input"
                maxlength="255"
                v-model="currEdit.historicalExplanation"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="edit_btns">
      <el-button class="bin_button" size="small" @click="cancelBtn">
        取消
      </el-button>
      <el-button class="bin_button" size="small" @click="editCommit">
        确认
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "editDialog",
  props: {
    currEdit: {
      type: Object,
      default: () => {},
    },
    rowrange: {
      type: String,
      default: () => {},
    },
  },
  data() {
    return {
      rules: {
        fieldAttribute: [
          { required: true, message: "请输入属性名", trigger: "blur" },
        ],
        fieldName: [
          { required: true, message: "请输入字段标识", trigger: "blur" },
        ],
        fieldDescription: [
          { required: true, message: "请输入字段名称", trigger: "blur" },
        ],
        fieldType: [
          { required: true, message: "请选择数据类型", trigger: "change" },
        ],
        fieldLength: [
          { required: true, message: "请输入长度", trigger: "blur" },
        ],
      },
      typeOptions: [
        {
          label: "字符串",
          value: "STRING",
        },
        {
          label: "整数",
          value: "INT",
        },
        {
          label: "长整数",
          value: "LONG",
        },
        {
          label: "浮点数",
          value: "FLOAT",
        },
        {
          label: "双精度浮点数",
          value: "DOUBLE",
        },
        {
          label: "布尔值",
          value: "BOOLEAN",
        },
        {
          label: "日期",
          value: "DATE",
        },
        {
          label: "时间戳",
          value: "TIMESTAMP",
        },
        {
          label: "十进制",
          value: "DECIMAL",
        },
        {
          label: "二进制",
          value: "BINARY",
        },
        {
          label: "时间",
          value: "TIME",
        },
        {
          label: "大对象",
          value: "BLOB",
        },
        {
          label: "日期时间",
          value: "DATETIME",
        },
      ],
      optionsnull: [
        {
          value: 0,
          label: "可以为空",
        },
        {
          value: 1,
          label: "不可为空",
        },
      ],
      optionsonly: [
        {
          value: 0,
          label: "不唯一",
        },
        {
          value: 1,
          label: "唯一",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    cancelBtn() {
      this.$emit("cancel");
    },
    adddialogshow() {
      this.addDialogVisible = true;
    },
    editFn() {
      this.editDialogVisible = true;
    },
    editCommit() {
      if (this.currEdit) {
        if (this.currEdit.fieldRangeMin || this.currEdit.fieldRangeMax) {
          let result =
            this.currEdit.fieldRangeMin.toString() +
            "," +
            this.currEdit.fieldRangeMax.toString();
          this.currEdit.fieldRange = result;
        }
      }
      this.$emit("editCommit", this.currEdit);
    },
    record() {
      this.recordDialogShow = true;
    },
    delete1() {
      this.delDialogShow = true;
    },
    convertDialogVisibleFn() {},
    exprotModelFn() {},
  },
  watch: {
    currEdit: {
      handler(val) {
        if (val) {
          console.log(val, "5555555555555");
          this.currEdit = val;
          if (this.currEdit.fieldRange) {
            this.$set(
              this.currEdit,
              "fieldRangeMin",
              this.currEdit.fieldRange.split(",")[0]
            );
            this.$set(
              this.currEdit,
              "fieldRangeMax",
              this.currEdit.fieldRange.split(",")[1]
            );
          } else {
            this.$set(this.currEdit, "fieldRangeMin", "");
            this.$set(this.currEdit, "fieldRangeMax", "");
          }
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.edit_dialog {
  .edit_list {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    ::v-deep .el-form--label-right .el-form-item__label {
      color: #fff;
    }
    .edit_item {
      display: flex;
      align-items: center;
      width: 50%;
      margin-bottom: 18px;
      .name {
        width: 120px;
        font-size: 18px;
        text-align: right;
        color: #fff;
      }
      .ipt {
        width: calc(100% - 120px);
      }
    }
  }
  .edit_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
}
</style>
